<template>
  <div class="content">
    <!-- 引入头部组件 -->
    <div class="header_box">
      <header1View>
        <template v-slot:center>
          <div class="header_center">
            历史订单
          </div>
        </template>
        <template v-slot:right>
          <div class="header_right">
            <!-- 日历图标 -->
            <span>
              <van-icon @click="toDate"
                        name="calendar-o" />
            </span>
            <!-- 搜索图标 -->
            <span>
              <van-icon @click="toSearch"
                        name="search" />
            </span>
          </div>
        </template>
      </header1View>
    </div>
    <div class="historyOrders">
      <van-tabs v-model="active"
                @change="changeTab">
        <van-tab v-for="item in tabList"
                 :key="item"
                 :title="item">
          <!-- 订单列表 -->
          <div class="orderList">
            <!-- 订单item -->
            <div v-for="item in arr"
                 :key="item.id"
                 class="orderItem">
              <!-- 用户收货信息 -->
              <div class="user">
                <div class="userInfo">
                  <div class="username">{{item.username}}</div>
                  <div class="icon">
                    <van-icon name="location" />
                    <a :href="'tel:' + 18482315704"
                       style="color:#333"
                       class="phoneIcon">
                      <van-icon name="phone" />
                    </a>
                  </div>
                </div>
                <div class="address">{{item.address}}</div>
              </div>
              <!-- 平台专送？商家配送 -->
              <!-- 【待评价】状态1-->
              <div v-if="item.state === '5'"
                   class="order_state">
                <div class="order_state_left">
                  <div class="order_time">
                    <span>{{item.time}}</span>
                    <span>{{item.personState}}</span>
                  </div>
                  <div class="bgc_words">
                    <span class="P_bgc S_bgc">{{item.method}}</span>
                    <span class="b_word">骑手：张三送</span>
                    <a :href="'tel:' + 18482315704"
                       style="color:#333">
                      <van-icon name="phone" />
                    </a>
                  </div>
                </div>
                <div class="order_state_right">
                  <!-- 订单跟踪 -->
                  <van-cell is-link
                            @click="showFollowHandel">
                    <span id="follow">订单跟踪</span>
                  </van-cell>
                </div>
              </div>
              <!-- 【退款成功】状态2 -->
              <div v-if="item.state === '6'"
                   class="order_state">
                <div class="order_state_left">
                  <div class="order_time">
                    <span>{{item.time}}</span>
                    <span>订单已关闭</span>
                  </div>
                  <div class="bgc_words">
                    <span class="P_bgc S_bgc">{{item.method}}</span>
                  </div>
                </div>
                <div class="order_state_right">
                  <!-- 订单跟踪 -->
                  <van-cell is-link
                            @click="showFollowHandel">
                    <span id="follow">订单跟踪</span>
                  </van-cell>
                </div>
              </div>
              <!-- 商品图片数量展示 -->
              <div class="imgNum">
                <!-- 图片数小于等于3 -->
                <div class="imgList"
                     v-if="item.imgList.length <= 3">
                  <div class="imgBox"
                       v-for="itemImg in item.imgList"
                       :key="itemImg.id"><img :src="itemImg.src"
                         alt=""></div>
                </div>
                <!-- 图片数大于3 -->
                <div class="imgList"
                     v-if="item.imgList.length > 3">
                  <div class="imgBox"
                       v-for="itemImg in item.imgList.slice(0,3)"
                       :key="itemImg.id"><img :src="itemImg.src"
                         alt=""></div>
                  <div class="imgDot"
                       @click="showGoodsPopup(item)">...</div>
                </div>
                <div class="num_icon">
                  <div class="num">
                    <van-cell is-link
                              @click="showGoodsPopup(item)">
                      <span class="num">共{{item.imgList.length}}件商品</span>
                    </van-cell>
                  </div>
                  <div class="n_icon">
                    <span>
                      <van-icon name="arrow" />
                    </span>
                  </div>
                </div>
              </div>
              <!-- 发票信息 -->
              <!-- 【待处理】发票 状态1 -->
              <div v-if="item.state === '5'"
                   class="receipt">
                <span>发票信息</span>
                <span>{{item.need}}</span>
              </div>
              <!-- 【未取货】发票 状态2 -->
              <div v-if="item.state === '6'"
                   class="receipt">
                <span class="receiptInfo">发票信息</span>
                <van-cell is-link
                          @click="showReceipt">
                  <span class="look">查看</span>
                </van-cell>
              </div>
              <!-- 技术服务费 -->
              <div class="service">
                <span>技术服务费</span>
                <span>{{item.service}}</span>
              </div>
              <!-- 本单预计收入 -->
              <div class="income">
                <span>本单预计收入</span>
                <span class="redColor">{{item.income}}</span>
              </div>
              <!-- 【待处理】订单信息 状态1 -->
              <!-- 订单信息 -->
              <div class="orderInfo1">
                <div>
                  <span>订单编号：</span>
                  <span>{{item.num2}}</span>
                </div>
                <div @click="tradeInfo(item.imgList)">
                  <span>交易快照：发生争议时，可作为判断依据</span>
                  <span>
                    <van-icon name="arrow" />
                  </span>
                </div>
                <div>
                  <span>下单时间：</span>
                  <span>{{item.payTime}}</span>
                </div>
              </div>
              <!-- 【待处理】 按钮 状态1 -->
              <!-- 评价配送员 -->
              <div class="btns_flex"
                   v-if="item.state === '5'">
                <van-cell is-link
                          @click="print">
                  <button class="printBtn">再次打印</button>
                </van-cell>
                <van-popup round
                           v-model="showPrint">
                  <div class="print_model">
                    <h3 style="text-align:center">没有检测到打印机</h3>
                    <div style="font-size:12px">您可能没有添加到打印机，或者打印机连接异常</div>
                    <div class="printBtns">
                      <button class="cancelPrint"
                              @click="cancelPrint">无需打印</button>
                      <button class="surePrint"
                              @click="surePrint">添加打印机</button>
                    </div>
                  </div>
                </van-popup>
                <button class="assessBtn"
                        @click="assessPerson">评价配送员</button>
              </div>
              <!-- 评价配送员 -->
              <div class="btns"
                   v-if="item.state === '6'">

                <!-- 再次打印按钮 -->
                <div>
                  <van-cell is-link
                            @click="print">
                    <button class="printBtn">再次打印</button>

                  </van-cell>
                  <van-popup round
                             v-model="showPrint">
                    <div class="print_model">
                      <h3 style="text-align:center">没有检测到打印机</h3>
                      <div style="font-size:12px">您可能没有添加到打印机，或者打印机连接异常</div>
                      <div class="printBtns">
                        <button class="cancelPrint"
                                @click="cancelPrint">无需打印</button>
                        <button class="surePrint"
                                @click="surePrint">添加打印机</button>
                      </div>
                    </div>
                  </van-popup>
                </div>

              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 底部导航栏 -->
    <div>
      <HomeBottom></HomeBottom>
    </div>

    <!-- 日期 -->
    <van-calendar v-model="dateShow"
                  type="range"
                  @confirm="onConfirm" />
    <!--  商品信息组件 -->
    <goodsInfo :show="goodsShow"
               @hideGoods="hideGoodsPopup"
               :goodsDetailItem="goodsDetailItem" />
    <!-- 查看发票按钮 -->
    <closeOrder :show="closeOrder"
                :isCloseOrder="isCloseOrderFather"
                @hideOrder="hideOrderPopup" />
  </div>

</template>

<script>
import header1View from '../../components/OrdersComponents/header1View.vue'
import goodsInfo from '../../components/OrdersComponents/goodsInfo.vue'
import closeOrder from '../../components/OrdersComponents/closeOrder.vue'
import HomeBottom from '../../components/homepage/HomeBottom.vue'



export default {
  data () {
    return {
      arr: [],//数据备份
      active: 2,//tab栏默认展示
      date: '', // 日期赋值
      dateShow: false, // 日期组件显示隐藏
      goodsShow: false, // 商品组件显示隐藏
      showLook: false,//查看发票
      isCloseOrderFather: '3', // 默认点击发票
      closeOrder: false,//关闭交易
      showPrint: false,//打印机显示隐藏
      tabList: ['待评价', '退款成功', '全部'],
      orderList: [
        {
          id: '1',
          state: '5',
          username: '刘先生',
          address: '深证市龙华区名治大道c903',
          time: '18:13',
          personState: '等待顾客付款',
          method: '平台专送',
          person: '王五',
          imgList: [
            {
              id: '1',
              title: '川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭',
              desc: ['小份', '微辣'],
              price: '188',
              num: 'x2',
              weight: '90p',
              zhuliao: '鸡肉',
              sales: '60',
              discount: '9.6折',
              price1: '125P',
              price2: '130P',
              miaoshu: '香辣鸡排汉堡肉质鲜嫩个，外层酥脆，内层多汁',
              taste: '微辣',
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E6%9C%AA%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95__%E5%BE%85%E5%A4%84%E7%90%86__%E5%B9%B3%E5%8F%B0%E9%85%8D%E9%80%81_/u7026.png'
            },
            {
              id: '2',
              title: '番茄炒蛋番茄炒蛋番茄炒蛋番茄炒蛋番茄炒蛋',
              desc: '中份',
              price: '8',
              num: 'x1',
              weight: '90p',
              zhuliao: '鸡肉',
              sales: '60',
              discount: '9.6折',
              price1: '125P',
              price2: '130P',
              miaoshu: '番茄炒蛋番茄炒蛋番茄炒蛋',
              taste: '微辣',
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E6%9C%AA%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95__%E5%BE%85%E5%A4%84%E7%90%86__%E5%B9%B3%E5%8F%B0%E9%85%8D%E9%80%81_/u7027.png'
            }
          ],
          need: '不需要',
          service: '-8.4',
          income: '47.4',
          num2: '121212121212',
          payTime: '09-07 18:03',
          totalPrice: '98',
          fee: '3',
          reduce: '5',
          quan: '4',
          payMoney: '88'

        },
        {
          id: '2',
          state: '6',
          username: '张女士',
          address: '深证市龙华区名治大道c903',
          time: '18:13',
          personState: '等待骑手接单',
          method: '平台专送',
          person: '张三',
          need: '不需要',
          imgList: [
            {
              id: '1',
              title: '蚂蚁上树蚂蚁上树蚂蚁上树蚂蚁上树蚂蚁上树',
              desc: ['大份', '微辣'],
              price: '18',
              num: 'x2',
              weight: '90p',
              zhuliao: '鸡肉',
              sales: '60',
              discount: '9.6折',
              price1: '125P',
              price2: '130P',
              miaoshu: '香辣蚂蚁上树蚂蚁上树',
              taste: '微辣',
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E6%9C%AA%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95__%E5%BE%85%E5%A4%84%E7%90%86__%E5%B9%B3%E5%8F%B0%E9%85%8D%E9%80%81_/u7026.png'
            },
            {
              id: '2',
              title: '扬州炒饭扬州炒饭扬州炒饭扬州炒饭',
              desc: '大份',
              price: '18',
              num: 'x2',
              weight: '90p',
              zhuliao: '鸡肉',
              sales: '60',
              discount: '9.6折',
              price1: '125P',
              price2: '130P',
              miaoshu: '香辣鸡排汉堡肉质鲜嫩个，外层酥脆，内层多汁',
              taste: '微辣',
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E6%9C%AA%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95__%E5%BE%85%E5%A4%84%E7%90%86__%E5%B9%B3%E5%8F%B0%E9%85%8D%E9%80%81_/u7027.png'
            }
          ],
          service: '-8.4',
          income: '97.4',
          num2: '121212121212',
          payTime: '09-09 12:03',
          totalPrice: '128',
          fee: '5',
          reduce: '10',
          quan: '6',
          payMoney: '99'

        }],
      goodsDetailItem: {}//商品详情对象储存
    }
  },
  components: {
    header1View,
    goodsInfo,
    closeOrder,
    HomeBottom
  },
  created () {
    this.arr = this.orderList
  },
  methods: {
    // 状态切换
    changeTab () {
      console.log(this.active)
      this.arr = this.orderList.filter(item => {
        if (item.state == +this.active + 5) {
          console.log(+this.active + 5);
          return item
        }
        if (+this.active + 5 == 7) {
          console.log(+this.active + 5);
          return item
        }
      })
    },
    toDate () {
      this.dateShow = true
    },
    toSearch () {
      this.$router.push('/searchOrder')
    },
    // 控制商品详情的显示
    showGoodsPopup (obj) {
      this.goodsShow = true;
      this.goodsDetailItem = obj
      console.log(this.goodsDetailItem);
    },
    // 交易快照
    tradeInfo (obj) {
      this.$router.push({ path: '/tradeInfo', query: { goodList: JSON.stringify(obj) } })
    },
    // 查看发票按钮的显示
    showReceipt () {
      this.isCloseOrderFather = '3'
      this.closeOrder = true;
    },
    // 选择日期的函数
    formatDate (date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm (date) {
      console.log(date)
      const [start, end] = date;
      this.dateShow = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
      console.log(this.date)
    },
    // 隐藏商品详情
    hideGoodsPopup (val) {
      console.log("接收商品详情传过来的参数：", val)
      this.goodsShow = val;
    },
    // 跳转评价配送员页面
    assessPerson () {
      this.$router.push('/commentPerson')
    },
    // 隐藏发票的详情
    hideOrderPopup (val) {
      console.log("接收商品详情传过来的参数：", val)
      this.closeOrder = val;
    },
    // 显示打印机弹窗
    print () {
      this.showPrint = true
    },
    // 点击无需打印机
    cancelPrint () {
      this.showPrint = false
    },
    // 点击添加打印机
    surePrint () {
      this.showPrint = false
      this.$router.push('/CloudPrinters')
    },
    // 订单跟踪地图
    showFollowHandel () {
      this.isCloseOrderFather = '5'
      this.closeOrder = true;
    },
  }
}
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
  // outline: solid red;
}
.header_center {
  align-items: center;
  margin: 0 auto;
  // outline: red solid;
  padding-left: 50px;
}
.header_right span {
  padding: 5px;
  margin-right: 10px;
}
.van-icon-calendar-o:before {
  font-size: 20px;
}
.van-icon-search:before {
  font-size: 18px;
}
.content {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  font-size: 14px;
  // margin: 5px 0px;
  color: rgb(67, 66, 66);
}

.header_box {
  width: 100%;
  position: fixed;
  z-index: 999;
  top: 0;
}
.historyOrders {
  margin-top: 50px;
}
::v-deep .van-tabs--line .van-tabs__wrap {
  height: 1.17333rem;
  position: fixed;
  width: 100%;
  z-index: 100;
}
.orderList {
  padding-bottom: 15px;
  padding-top: 44px;
}
.orderItem {
  margin-top: 15px;
  background-color: #fff;
  padding: 10px;
}
.orderInfo1 {
  font-size: 12px;
}
.orderInfo1 div {
  margin-top: 10px;
}
.userInfo {
  display: flex;
  justify-content: space-between;
}
.username {
  font-size: 16px;
}
.address {
  font-size: 14px;
  margin: 5px 0px;
  color: rgb(67, 66, 66);
}
.van-icon-location:before,
.van-icon-phone:before {
  font-size: 16px;
  margin: 0px 5px;
}
.order_state {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}
.order_time span {
  font-size: 16px;
  margin-right: 5px;
}
.order_state_left {
  height: 60px;
}
.order_state_right {
  height: 60px;
  line-height: 60px;
}
.bgc_words {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.P_bgc {
  display: inline-block;
  background-color: #ff6e53;
  height: 20px;
  line-height: 20px;
  color: #fff;
  margin-right: 5px;
  font-size: 12px;
}
// .S_bgc {
//   background-color: #0066cc;
// }
.b_word {
  vertical-align: bottom;
}
#follow {
  color: #0066cc;
  font-size: 14px;
}
.imgNum {
  display: flex;
  justify-content: space-between;
}
.imgList {
  display: flex;
}
.imgDot {
  width: 50px;
  height: 50px;
  border: 1px solid #f5f5f5;
  background-color: #fff;
  text-align: center;
  font-size: 30px;
}
.imgBox img {
  width: 50px;
  height: 50px;
  border: 1px solid #f5f5f5;
  margin-right: 5px;
}
.num_icon {
  display: flex;
}
.num,
.n_icon {
  color: #0066cc;
  height: 50px;
  line-height: 50px;
  display: flex;
  font-size: 14px;
}
.receipt,
.service,
.income {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
}
.receipt span,
.service span,
.income span {
  display: inline-block;
}

.van-cell {
  position: "";
}
// .printBtn {
//   margin-right: 5px;
// }
.printBtn,
.assessBtn {
  font-size: 14px;
  width: 30%;
  height: 35px;
  line-height: 35px;
  border: 1px solid #efecec;
  border-radius: 5px;
  background-color: #fff;
  float: right;
}
.btns {
  margin-top: 10px;
  height: 40px;
  line-height: 40px;
}
.btns .van-icon-arrow:before {
  content: "";
}
.van-icon-search:before {
  font-size: 18px;
}
.num .van-icon-arrow:before {
  content: "";
}
::v-deep .van-tabs--line .van-tabs__wrap {
  height: 1.17333rem;
  position: fixed;
  width: 100%;
  z-index: 100;
}
.receiptInfo {
  display: inline-block;
  width: 40%;
}

.look {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #0066cc;
  display: inline-block;
  float: right;
}
.receipt .van-icon-arrow:before {
  height: 40px;
  line-height: 40px;
}
.redColor {
  color: #cc0000;
}
// ::v-deep .btns_flex .van-overlay {
//   background-color: rgba(76, 74, 74, 0.1);
// }
::v-deep .van-overlay {
  background-color: rgba(0, 0, 0, 0.3);
}
.btns_flex {
  display: flex;
}
.btns_flex .van-icon-arrow:before {
  content: "";
}
// 打印机弹框
.print_model {
  padding: 15px;
  width: 260px;
  height: 120px;
}
.printBtns {
  border-top: 1px solid rgb(202, 201, 201);
}
.printBtns button {
  width: 50%;
  background-color: #fff;
  border: none;
  height: 40px;
  line-height: 40px;
}
</style>